<template>
  <div class="top-line">
    <div class="line-right">
      <el-dropdown class="top-line-menu" placement="bottom" trigger="hover">
        <span class="menu-link">{{ userInfo.name }}</span>
        <el-dropdown-menu slot="dropdown" class="menu-dropdown-item">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>修改密码</el-dropdown-item>
          <el-dropdown-item>
            <el-switch active-text="深色" inactive-text="浅色" @change="changeColorStyle"></el-switch>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <i class="menu-split"></i>
      <div class="top-line-menu" @click="logout">
        <i class="iconfont icon-logout"></i>
      </div>
    </div>
    <div class="line-left">
      <slot name="top-menu"></slot>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Header',
  data () {
    return {}
  },
  methods: {
    logout () {
      this.$store.commit('logout')
      this.$router.push({path: 'login'})
    },
    changeColorStyle () {
      this.$store.commit('changeColorStyle')
    }
  },
  computed: mapState({
    userInfo: state => state.global.loginUser
  })
}
</script>

<style lang="less" scoped>
.top-line {
  height: 100%;
  padding: 0 20px 0 20px;
  max-height: 60px;
  .line-left {
    width: auto;
    height: 100%;
    float: left;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
  }
  .line-right {
    width: auto;
    height: 100%;
    float: right;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    .top-line-menu {
      height: 58px;
      cursor: pointer;
      font-size: 16px;
      .menu-link {
        display: inline-block;
        height: 18px;
        margin: 20px;
        line-height: 18px;
      }
      .menu-dropdown-item {
        text-align: center;
      }
    }
    .menu-split {
      width: 2px;
      height: 20px;
      margin: 20px 0;
    }
  }
}
.icon-logout {
  font-size: 18px;
  display: inline-block;
  margin: 20px 20px;
}
</style>
